<template>
  <div class="app-container">

    <div class="filter-container">

      <el-date-picker
        v-model="tradingDay"
        value-format="yyyy-MM-dd"
        type="date"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
      >search
      </el-button>
    </div>
    <my-table
      :grid-table-header="tableHeard"
      :table-data="tableData"
      :clikc-cell="clickCell"
      :mapping-name="mappingName"
      :show-red-green-column="['mv_share_hold', 'delta_pnl']"
      :show-absolute-vlue="showAbsoluteVlue"
      @cellOnClick="cellClik"
    />
  </div>
</template>

<script>
import myTable from '@/components/Tables/MuitipTable'
import { riskShowNameMapping, riskSecondaryNameMapping, riskSummary } from '@/api/vadmin/stock/risk_monitor'

export default {
  components: { myTable },
  data() {
    return {
      showAbsoluteVlue: '{"mv_share_hold":100}',
      tableData: [],
      tableHeard: {},
      mappingName: {},
      clickCell: ['account_name'],
      tradingDay: new Date()
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      await riskShowNameMapping().then((response) => {
        this.mappingName = response.data.data
        console.log(this.mappingName )

       for (const  a in  this.mappingName){
         // console.log(a+ " ="+" FloatField(null=True,blank=True ,verbose_name='"+this.mappingName[a]+"')" );

         // const str='<el-table-column label="'+this.mappingName[a]+'" align="center" prop="'+a+'" />'

         const str='        <el-form-item label="'+this.mappingName[a]+'" prop="'+a+'">\n' +
           '          <el-input v-model="form.'+a+'" placeholder="'+this.mappingName[a]+'" />\n' +
           '        </el-form-item>'

         console.log(str)
       }


      }).catch((e) => {
        console.log(e)
      })
      await riskSecondaryNameMapping().then((response) => {
        this.tableHeard = response.data.data

      }).catch((e) => {
        console.log(e)
      })
      await riskSummary().then((response) => {
        const arr = response.data.data.map((v) => {
          // console.log(v)
          return JSON.parse(v)
        })
        this.tableData = arr
      }).catch((e) => {
        console.log(e)
      })
    },
    rowclik(row) {
      // console.log(' rowClikc---callback----')
      // console.log(row)
      // console.log(row.name)
      // console.log('跳转')
      this.$router.push({ name: 'demo', params: { account: '思达22号' } })
    },
    cellClik(row, column, cell, event) {
      console.log(' cellClik---callback----')
      // this.$router.push({ name: 'demo', params: { account: '思达22号' }})
      // console.log(column.label)
      //
      // // 这里做个异步请求
      // this.tableData3=this.tableData2
      this.$router.push({ name: 'table2', params: { account: column.label } })
    }
  }
}
</script>

<style scoped>

</style>
